<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>CSS Text Button Design.</title>
		<link rel="stylesheet" type="text/css" href="./css/button.css" />
		<style type="text/css">
			h1{ font:bold 1.5em Arial, Sans-serif;}
			table{ border:1px solid #ccc; border-collapse:collapse; margin-bottom:15px; width:100%;}
			caption{ font:bold 1em Arial, Sans-serif; text-align:left;}
			th, td{ padding:5px; font-size:.7em; font-family:Arial, Sans-serif;}
			th{ font:bold .8em Arial, Sans-serif; background:#f4f4f4;}
			code{ font-family:Arial, Sans-serif;}
			.gray{ color:#ccc;}
		</style>
	</head>
	<body>
		<h1>CSS Text Button Design</h1>
		<table border="1">
			<caption>HTML Markup</caption>
			<thead>
				<tr>
					<th scope="col">Element</th>
					<th scope="col">Markup</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><code>&lt;span class=&quot;button&quot;&gt;<strong>&lt;a href=&quot;#&quot;&gt;</strong>TEXT<strong>&lt;/a&gt;</strong>&lt;/span&gt;</code></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><code>&lt;span class="button"&gt;<strong>&lt;button type="button"&gt;</strong>TEXT<strong>&lt;/button&gt;</strong>&lt;/span&gt;</code></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><code>&lt;span class="button"&gt;<strong>&lt;input type="submit" value="TEXT" /&gt;</strong>&lt;/span&gt;</code></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Used Classes</caption>
			<thead>
				<tr>
					<th scope="col">Variation</th>
					<th scope="col">Mixable Class Name</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">declaration</th>
					<td>button</td>
				</tr>
				<tr>
					<th scope="row">color</th>
					<td>white, black, green, blue, red</td>
				</tr>
				<tr>
					<th scope="row">size</th>
					<td>small, default, large, xLarge</td>
				</tr>
				<tr>
					<th scope="row">strong</th>
					<td>strong</td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>White Buttons</caption>
			<thead>
				<tr>
					<th scope="col">Element / Size</th>
					<th scope="col">small</th>
					<th scope="col">default</th>
					<th scope="col">large</th>
					<th scope="col">xLarge</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><span class="button small"><a href="#">anchor</a></span></td>
					<td><span class="button"><a href="#">anchor</a></span></td>
					<td><span class="button large"><a href="#">anchor</a></span></td>
					<td><span class="button xLarge"><a href="#">anchor</a></span></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><span class="button small"><button type="button">button</button></span></td>
					<td><span class="button"><button type="button">button</button></span></td>
					<td><span class="button large"><button type="button">button</button></span></td>
					<td><span class="button xLarge"><button type="button">button</button></span></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><span class="button small"><input type="submit" value="input" /></span></td>
					<td><span class="button"><input type="submit" value="input" /></span></td>
					<td><span class="button large"><input type="submit" value="input" /></span></td>
					<td><span class="button xLarge"><input type="submit" value="input" /></span></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Black Buttons</caption>
			<thead>
				<tr>
					<th scope="col">Element / Size</th>
					<th scope="col">small</th>
					<th scope="col">default</th>
					<th scope="col">large</th>
					<th scope="col">xLarge</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><span class="button black small"><a href="#">anchor</a></span></td>
					<td><span class="button black"><a href="#">anchor</a></span></td>
					<td><span class="button black large"><a href="#">anchor</a></span></td>
					<td><span class="button black xLarge"><a href="#">anchor</a></span></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><span class="button black small"><button type="button">button</button></span></td>
					<td><span class="button black"><button type="button">button</button></span></td>
					<td><span class="button black large"><button type="button">button</button></span></td>
					<td><span class="button black xLarge"><button type="button">button</button></span></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><span class="button black small"><input type="submit" value="input" /></span></td>
					<td><span class="button black"><input type="submit" value="input" /></span></td>
					<td><span class="button black large"><input type="submit" value="input" /></span></td>
					<td><span class="button black xLarge"><input type="submit" value="input" /></span></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Green Buttons</caption>
			<thead>
				<tr>
					<th scope="col">Element / Size</th>
					<th scope="col">small</th>
					<th scope="col">default</th>
					<th scope="col">large</th>
					<th scope="col">xLarge</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><span class="button green small"><a href="#">anchor</a></span></td>
					<td><span class="button green"><a href="#">anchor</a></span></td>
					<td><span class="button green large"><a href="#">anchor</a></span></td>
					<td><span class="button green xLarge"><a href="#">anchor</a></span></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><span class="button green small"><button type="button">button</button></span></td>
					<td><span class="button green"><button type="button">button</button></span></td>
					<td><span class="button green large"><button type="button">button</button></span></td>
					<td><span class="button green xLarge"><button type="button">button</button></span></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><span class="button green small"><input type="submit" value="input" /></span></td>
					<td><span class="button green"><input type="submit" value="input" /></span></td>
					<td><span class="button green large"><input type="submit" value="input" /></span></td>
					<td><span class="button green xLarge"><input type="submit" value="input" /></span></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Blue Buttons</caption>
			<thead>
				<tr>
					<th scope="col">Element / Size</th>
					<th scope="col">small</th>
					<th scope="col">default</th>
					<th scope="col">large</th>
					<th scope="col">xLarge</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><span class="button blue small"><a href="#">anchor</a></span></td>
					<td><span class="button blue"><a href="#">anchor</a></span></td>
					<td><span class="button blue large"><a href="#">anchor</a></span></td>
					<td><span class="button blue xLarge"><a href="#">anchor</a></span></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><span class="button blue small"><button type="button">button</button></span></td>
					<td><span class="button blue"><button type="button">button</button></span></td>
					<td><span class="button blue large"><button type="button">button</button></span></td>
					<td><span class="button blue xLarge"><button type="button">button</button></span></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><span class="button blue small"><input type="submit" value="input" /></span></td>
					<td><span class="button blue"><input type="submit" value="input" /></span></td>
					<td><span class="button blue large"><input type="submit" value="input" /></span></td>
					<td><span class="button blue xLarge"><input type="submit" value="input" /></span></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Red Buttons</caption>
			<thead>
				<tr>
					<th scope="col">Element / Size</th>
					<th scope="col">small</th>
					<th scope="col">default</th>
					<th scope="col">large</th>
					<th scope="col">xLarge</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><span class="button red small"><a href="#">anchor</a></span></td>
					<td><span class="button red"><a href="#">anchor</a></span></td>
					<td><span class="button red large"><a href="#">anchor</a></span></td>
					<td><span class="button red xLarge"><a href="#">anchor</a></span></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><span class="button red small"><button type="button">button</button></span></td>
					<td><span class="button red"><button type="button">button</button></span></td>
					<td><span class="button red large"><button type="button">button</button></span></td>
					<td><span class="button red xLarge"><button type="button">button</button></span></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><span class="button red small"><input type="submit" value="input" /></span></td>
					<td><span class="button red"><input type="submit" value="input" /></span></td>
					<td><span class="button red large"><input type="submit" value="input" /></span></td>
					<td><span class="button red xLarge"><input type="submit" value="input" /></span></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Strong Buttons</caption>
			<thead>
				<tr>
					<th scope="col">Element / Size</th>
					<th scope="col">small</th>
					<th scope="col">default</th>
					<th scope="col">large</th>
					<th scope="col">xLarge</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">a</th>
					<td><span class="button strong small"><a href="#">anchor</a></span></td>
					<td><span class="button strong"><a href="#">anchor</a></span></td>
					<td><span class="button strong large"><a href="#">anchor</a></span></td>
					<td><span class="button strong xLarge"><a href="#">anchor</a></span></td>
				</tr>
				<tr>
					<th scope="row">button</th>
					<td><span class="button strong small"><button type="button">button</button></span></td>
					<td><span class="button strong"><button type="button">button</button></span></td>
					<td><span class="button strong large"><button type="button">button</button></span></td>
					<td><span class="button strong xLarge"><button type="button">button</button></span></td>
				</tr>
				<tr>
					<th scope="row">input</th>
					<td><span class="button strong small"><input type="submit" value="input" /></span></td>
					<td><span class="button strong"><input type="submit" value="input" /></span></td>
					<td><span class="button strong large"><input type="submit" value="input" /></span></td>
					<td><span class="button strong xLarge"><input type="submit" value="input" /></span></td>
				</tr>
			</tbody>
		</table>
		<table border="1">
			<caption>Vertical Align Test</caption>
			<thead>
				<tr>
					<th scope="col">Size / Types</th>
					<th scope="col">Variable Types</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<th scope="row">small</th>
					<td>
						Text
						<span class="button small"><a href="#">anchor</a></span>
						Text
						<span class="button small"><button type="button">button</button></span>
						Text
						<span class="button small"><input type="submit" value="input" /></span>
						Text
					</td>
				</tr>
				<tr>
					<th scope="row">default</th>
					<td>
						Text
						<span class="button"><a href="#">anchor</a></span>
						Text
						<span class="button"><button type="button">button</button></span>
						Text
						<span class="button"><input type="submit" value="input" /></span>
						Text
					</td>
				</tr>
				<tr>
					<th scope="row">large</th>
					<td>
						Text
						<span class="button large"><a href="#">anchor</a></span>
						Text
						<span class="button large"><button type="button">button</button></span>
						Text
						<span class="button large"><input type="submit" value="input" /></span>
						Text
					</td>
				</tr>
				<tr>
					<th scope="row">xLarge</th>
					<td>
						Text
						<span class="button xLarge"><a href="#">anchor</a></span>
						Text
						<span class="button xLarge"><button type="button">button</button></span>
						Text
						<span class="button xLarge"><input type="submit" value="input" /></span>
						Text
					</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>
